<template>
    <div>
        <div class="fault-item" style="position: relative;">
            <i class="el-icon-close" @click="remove" style="font-size: 16px;position: absolute;right: 2px;top: 2px;"></i>
            <div class="item-title">
                <div class="item-text" :title="row.deviceName">{{ row.deviceName || '~' }}</div>
                <div class="item-tail item-text" style="margin-left: 20px;">{{ row.detail || '~' }}</div>
            </div>
            <div class="item-title item-bottom">
                <div class="item-text">{{ row.regionalNodeName || '~' }}{{
                    row.machineRoomName ? '-' + row.machineRoomName : '' }}</div>
                <div class="item-tail item-text">
                    <!-- 正在报警 -->
                    <i class="el-icon-circle-plus" v-if="row.status=='1'" @click="add" style="font-size: 18px;"></i>
                    <span v-else>
                        <i class="el-icon-s-order"  @click="showList" style="font-size: 18px;"></i>
                        {{ row.maintenanceTimes }}
                    </span>
                </div>
            </div>
        </div>
        <!-- 添加维护记录 -->
        <right-dialog title="添加维护记录" :visible="open" @closeDialog="closeOpen">
            <template v-slot:default>
                <edit-fault v-if="open" :editObj="editObj" @close="closeOpen" @change="dialChange"></edit-fault>
            </template>
        </right-dialog>
        <!-- 查看故障历史记录 -->
        <right-dialog title="故障历史记录" :visible="openTable" @closeDialog="closeTable">
            <template v-slot:default>
                <el-table :data="tableData" style="width: 700px;height: auto; overflow: auto;"
                    class="zt-table">
                    <el-table-column show-overflow-tooltip label="时间" sortable align="center" prop="createTime" />
                    <el-table-column show-overflow-tooltip label="所属台站" sortable align="center" prop="deviceName" />
                    <el-table-column show-overflow-tooltip label="机房" align="center" prop="machineRoomName" />
                    <el-table-column show-overflow-tooltip label="设备名称" sortable align="center" prop="deviceName" />
                    <el-table-column show-overflow-tooltip label="故障详情" align="center" prop="detail" />
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="table.pageNum" :page-size="table.pageSize" :total="table.total" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 40, 50, 60]">
                </el-pagination>
            </template>
        </right-dialog>
    </div>
</template>

<script>
import editFault from './editFault.vue'
import RightDialog from "@/components/TZ/RightDialog"
import Api from "@/api/business/fault";

export default {
    name: 'faultTag',
    emits: ['close', 'change'],
    components: { RightDialog, editFault },
    props: {
        row: {
            type: Object
        }
    },
    watch: {
    },
    data() {
        return {
            // 显示本设备的历史故障记录
            open: false,
            // 编辑弹窗中的数据
            editObj: {},
            // 是否打开历史记录
            openTable: false,
            // 历史记录
            tableData: [],
            // 分页数据
            table: {
                total: 0,
                pageSize: 10,
                pageNum: 1
            }
        }
    },
    created() {
    },
    methods: {
        // 关闭报警
        remove() {
            this.$modal.confirm('确认关闭报警？').then(() => {
                Api.deleteAlarm(this.row.alarmId).then(rs=>{
                this.$message.success("操作成功!");
                this.$emit('change');
            })
            }).catch(() => { });
        },
        // 关闭历史故障记录
        closeTable() {
            this.openTable = false;
        },
        // 打开历史故障记录
        showList() {
            // 故障列表
            Api.getAlarmList({
                deviceType: this.row.deviceType,
                deviceId: this.row.deviceId,
                ...this.table
            }).then(rs => {
                this.tableData = rs.rows;
                this.table.total = rs.total;
            })
            this.openTable = true;
        },
         // 分页数量变化
         handleSizeChange(size) {
            this.table.pageNum = 1;
            this.table.pageSize = size;
            this.showList();
        },
        // 页数变化
        handleCurrentChange(page) {
            this.table.pageNum = page;
            this.showList();
        },
        // 打开新增故障记录
        add() {
            this.open = true;
            this.editObj = {
                regionalNodeId: this.row.regionalNodeId,
                deviceType: this.row.deviceType,
                deviceId: this.row.deviceId + "",
                alarmId: this.row.alarmId
            }
            console.log(this.row)
        },
        // 关闭故障新增页面
        closeOpen() {
            this.open = false
        },
        // 保存成功
        dialChange() {
            this.closeOpen();
            this.$emit('change');
        },

    }
}
</script>

<style lang="scss" scoped>
.fault-item {
    height: 64px;
    background-color: #D95348;
    color: #F4F4F4;
    border-radius: 8px;
    margin-right: 4px;
    margin-bottom: 4px;
    padding: 10px 10px 0px 10px;
}

.item-title {
    display: flex;
    justify-content: space-between;
}

.item-tail {
    margin-left: 5px;
}

.item-bottom * {
    margin-top: 5px;
    font-size: 12px;
}

.item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    min-width: 20px;
}

.item-num {
    width: 30px;
    height: 30px;
    background-image: url('../../../../../public/image/xxx.png');
    background-repeat: no-repeat;
    background-size: 17px 17px;
    padding-left: 20px;
    display: inline-flex;
    margin-left: 20px;
}
.el-pagination {
    ::v-deep.el-input__inner {
        background: none;
        border: none;
    }

    ::v-deep.btn-prev {
        background: none;
        border: none;
    }

    ::v-deep.btn-next {
        background: none;
        border: none;
    }
}
.el-table ::v-deep.el-tooltip{
    padding-top: 10px;
    padding-bottom: 10px;
}
</style>